<template>
  <div class="animation-box">
    <div class="bannerWave1"></div>
    <div class="bannerWave2"></div>
    <i
      v-if="props.arrow"
      class="iconfont icon-xialajiantouxiao arrow-box"
      @click="emit('snap-next')"
    ></i>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  arrow: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["snap-next"]);
</script>
<style lang="scss" scoped>
.animation-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 10;
}
.bannerWave1 {
  height: 84px;
  background: url("~@/assets/image/bannerwave1.png") repeat-x;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

.bannerWave2 {
  height: 100px;
  background: url("~@/assets/image/bannerwave2.png") repeat-x;
  position: absolute;
  width: 400%;
  z-index: 1;
  animation: gradientBG 120s linear infinite;
}
.arrow-box {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  animation: my-shake 1.5s ease-out infinite;
  z-index: 15;
  cursor: pointer;
  bottom: 40px;
}
</style>
